{% extends "base.html" %}  
 {% load static %}
{% block head%}
    <style>
    .modal {  
  display: none; /* 默认隐藏 */  
  position: fixed; /* 固定定位 */  
  z-index: 1; /* 置于顶层 */  
  left: 35%; /* 水平居中 */  
  top: 50%; /* 垂直居中 */  
  transform: translate(-50%, -50%); /* 偏移自身宽高的一半实现完全居中 */  
  width: 500px; /* 宽度 */  
  height: 310px; /* 高度 */
  border: 1px solid #888; /* 边框 */  
  background-color: #f9f9f9; /* 背景色 */  
}  
  
.modal-content {  
    width: 100%;
    height: 100%;
}  
    #videoPlayer {  
  width: 100%; /* 宽度填满.modal-content（现在是.modal的完整宽度） */  
  height: auto; /* 高度自适应以保持宽高比 */  
  /* 注意：不要设置video的max-height或max-width，除非你真的需要限制它的大小 */  
}  
 
  
/* 注意：由于视频设置为100%宽度，它会填满.modal-content的宽度  
   如果你想要视频保持其原始宽高比或特定大小，你需要对视频元素进行额外的样式设置 */
    </style>
{% endblock %}
{% block content %}

<div class="layui-carousel" id="test1">
    <!-------------------------轮播图------------------------------------>
    <div carousel-item>
        <div style="background-image: url('{% static '/index/2ens2-new.jpg' %}'); background-size: cover;"></div>
        <div style="background-image: url('{% static '/index/linxi_kv.jpg' %}'); background-size: cover;"></div>
    </div>

</div>
<!-------------------------------------车型推荐轮播图---------------------------->
<div class="car-model-recommendation">
    <h2>车型推荐</h2>
    <div class="carousel-container">
        <div class="carousel-names">
            <span class="carousel-name active" data-index="0">HR-V</span>
            <span class="carousel-name" data-index="1">第十一代思域</span>
            <span class="carousel-name" data-index="2">思域HATCHBACK</span>
            <span class="carousel-name" data-index="3">NS2猎光</span>
            <span class="carousel-name" data-index="4">享域</span>
        </div>
        <div class="carousel-images">
            <img src="{% static 'index/ens1.png' %}" alt="Image 1" class="carousel-img active">
            <img src="{% static 'index/civic-hatchback.png' %}" alt="Image 2" class="carousel-img">
            <img src="{% static 'index/思域HATCHBACK.png' %}" alt="Image 3" class="carousel-img">
            <img src="{% static 'index/NS2猎光.png' %}" alt="Image 4" class="carousel-img">
            <img src="{% static 'index/享域.png' %}" alt="Image 5" class="carousel-img">
        </div>
        <button class="prev">&laquo;</button>
        <button class="next">&raquo;</button>
    </div>
</div>


<!-------------------------------------购车流程图---------------------------->
<div class="car-purchase-process">
    <h2>购车流程</h2>
    <div class="process-1">
        <a href="javascript:void(0);" onclick="openModal()">
            <div class="process-name">
                <span>预约试驾</span>
            </div>
        </a>
        <a href=""><img src="{% static 'index/process-1.jpg' %}"></a>
    </div>

    <!-- 模态框 -->  
<div id="myModal" class="modal" style="width: 350px;height: 623px;">  
  <!-- 模态内容 -->  
  <div class="modal-content">  
          <span style="padding-left: 120px;font-size: 20px;text-align: center">预约试驾</span>
      <a href="javascript:;"><span class="close1" style="width: 40px;height: 40px;font-size: 38px;margin-left: 70px">&times;</span></a>  
    <!-- 视频 -->  
    <video id="videoPlayer" width="100%" controls>  
      <source src="/static/钟离.mp4" type="video/mp4">
    </video>  
  </div>  
</div>
    
    
    
    <div class="process-2">
        <a href="">
            <div class="process-name">
                <span>到店洽谈</span></div>
        </a>
        <a href=""><img src="{% static 'index/process-2.jpeg' %}"></a>
    </div>

    <div class="process-3-5">
        <a href="">
            <div class="process-name">
                <span>签订合同</span></div>
        </a>
        <a href=""><img src="{% static 'index/process-3.jpg' %}"></a>
    </div>

    <div class="process-3-5">
        <a href="">
            <div class="process-name">
                <span>交付款项</span></div>
        </a>
        <a href=""><img src="{% static 'index/process-4.jpeg' %}"></a>
    </div>

    <div class="process-5">
        <a href="">
            <div class="process-name">
                <span>提取车辆</span></div>
        </a>
        <a href=""><img src="{% static 'index/process-5.jpeg' %}"></a>
    </div>

</div>
    
{% endblock %}
{% block script %}
    <script>
        function openModal() {
            var modal = document.getElementById("myModal");
            modal.style.display = "block";
        }

        // 关闭模态框并暂停视频播放  
        function closeModal() {
            var modal = document.getElementById("myModal");
            modal.style.display = "none";

            // 暂停视频  
            var videoPlayer = document.getElementById("videoPlayer");
            if (videoPlayer) {
                videoPlayer.pause();
                // 如果你还想要重置视频到开头（可选）  
                // videoPlayer.currentTime = 0;  
            }
        }

        // 点击关闭按钮时关闭模态框  
        var span = document.getElementsByClassName("close1")[0];
        span.onclick = function () {
            closeModal();
        }

        // 点击模态框外部时关闭模态框（注意：这个实现可能需要调整以正确工作）  
        window.onclick = function (event) {
            var modal = document.getElementById("myModal");
            // 确保点击的是模态框外部  
            if (event.target == modal) {
                // 但这通常不会触发，因为点击的可能是modal的子元素  

                closeModal();
            }

        }  
    </script>
{% endblock %}
